<template>
  <div class="monthList">
    <!-- 标题 -->
    <div class="title">
      <span>社保报表</span>
    </div>
    <!-- 表格 -->
    <reportList :content-data="contentData" />
    <!-- 操作栏 -->
    <el-row
      type="flex"
      justify="center"
      align="middle"
      style="height:60px;backgroundColor:#fff;
    text-align: center;"
    >
      <el-col :span="12">
        <el-button size="small" type="primary" @click="archivingReportForm">归档报表</el-button>
        <el-button size="small" type="primary" @click="createReportForm">新建报表</el-button>
        <el-button size="small" @click="$router.go(-1)">取消</el-button>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import reportList from './components/reportList'
import { getArchivingArchive, getArchivingCont, newReport } from '@/api/social'

export default {
  components: {
    reportList
  },
  data() {
    return {
      yearVal: this.$route.query.yearMonth,
      contentData: []
    }
  },
  created() {
    this.getArchivingCont()
    console.log(this.$route)
  },
  methods: {
    async getArchivingCont() {
      this.contentData = await getArchivingCont({ month: this.yearVal, opType: 1 })
      // console.log(this.contentData)
    },
    //   归档报表
    archivingReportForm() {
      this.$confirm(`真的要归档${this.yearVal}报表吗？归档了就不能恢复了喔，耶稣都救不了的喔。`, '提示', {
        type: 'warning',
        center: true
      }).then(async() => {
        //  归档
        await getArchivingArchive({ yearMonth: this.yearVal })
        // 提示
        this.$message({
          type: 'success',
          message: '归档报表成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消归档报表'
        })
      })
    },
    // 创建报表
    createReportForm() {
      // 获取时间
      const time = this.getNextTime()
      const year = time.substring(0, 4)
      const month = time.substring(4)
      // 弹出框
      this.$confirm(`您将创建 《 ${year}年${month}月 》 报表`, '提示', {
        type: 'warning',
        center: true
      }).then(() => {
        // 修改显示时间
        this.yearVal = time
        // 创建
        this.createReport(time)
        //   弹窗
        this.$message({
          type: 'success',
          message: '报表创建成功!'
        })
        // 重载数据
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消创建报表'
        })
      })
    },
    // 获取时间
    getNextTime() {
      const year = this.yearVal.substring(0, 4)
      const month = this.yearVal.substring(4)
      let nextMonth = parseInt(month) + 1
      let nextYear = year
      if (nextMonth === 13) {
        nextYear = parseInt(year) + 1
        nextMonth = 1
      }
      if (nextMonth < 10) {
        nextMonth = '0' + nextMonth
      }
      const nextTime = nextYear + nextMonth
      return nextTime
    },
    // 创建报表
    async createReport(createTime) {
      await newReport({ 'yearMonth': createTime })
      this.$router.push(`/social/monthStatement?yearMonth=` + this.yearVal)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.monthList{
background-color: #f0f2f5;
  padding: 20px;
    .title{
        color: #409eff;
        background-color: #fff;
        border-bottom: 1px solid #f4f4f4;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        padding: 0 25px;
        span{
            border-bottom: solid 2px #409eff;
            display: inline-block;
            width: 100px;
            text-align: center;
        }
    }
}

</style>
